<template>
  <div class="right">

    <div class="right_head">
      <div class="right_head_con">
        <div class="right_head_top">
          <img src="../../assets/img/right/1/icon.png" alt="">
          <p>党员变化趋势</p>
          <img src="../../assets/img/right/1/head_icon.png" alt="">
        </div>
        <div class="right_head_content">
          <div ref="rightHeadContent" style="width: 1668px;height:673px"></div>
        </div>
      </div>
    </div>

    <div class="right_bottom_01">
      <div class="right_bottom_content">
        <div class="right_head_top">
          <img src="../../assets/img/right/2/icon.png" alt="">
          <p>党组织发展趋势</p>
          <img src="../../assets/img/right/2/head_icon.png" alt="">
        </div>
        <div class="right_head_content">
          <div ref="rightHeadContent2" style="width: 733px;height:830px"></div>
        </div>
      </div>
    </div>

    <div class="right_bottom_02">
      <div class="right_bottom_content right_bottom_02_content">
        <div class="right_head_top">
          <img src="../../assets/img/right/3/icon.png" alt="">
          <p>党员结构分析</p>
          <img src="../../assets/img/right/3/head_icon.png" alt="">
        </div>
        <div class="right_head_content">
          <!-- <div ref="rightHeadContent3" style="width: 733px;height:830px"></div> -->
          <ul class="left_item2_head">
            <li :class="{active: activeIndex == 0 || activeIndex == 5}">年龄</li>
            <li :class="{active: activeIndex == 1}">性别</li>
            <li :class="{active: activeIndex == 2}">学历</li>
            <li :class="{active: activeIndex == 3}">民族</li>
            <!-- <li :class="{active: activeIndex == 4}">经营型</li> -->
          </ul>
          <swiper ref="mySwiper" :options="swiperOptions">
            <swiper-slide>
              <div class="left_item2_echart">
                <div ref="rightHeadContent3" style="width: 733px;height:700px"></div>
              </div>
            </swiper-slide>
            <swiper-slide>
              <div class="left_item2_echart">
                <div ref="rightHeadContent4" style="width: 733px;height:700px"></div>
              </div>
            </swiper-slide>
            <swiper-slide>
              <div class="left_item2_echart">
                <div ref="rightHeadContent5" style="width: 733px;height:700px"></div>
              </div>
            </swiper-slide>
            <swiper-slide>
              <div class="left_item2_echart">
                <div ref="rightHeadContent6" style="width: 733px;height:700px"></div>
              </div>
            </swiper-slide>
            <div class="swiper-pagination" slot="pagination"></div>
          </swiper>
          
        </div>
      </div>
    </div>

  </div>
</template>

<script>
require("echarts-countries-js/echarts-countries-js/china")
import right1 from "./data/right1"
import right2 from "./data/right2"
import right3 from "./data/right3"
import right4 from "./data/right4"
import right5 from "./data/right5"
import right6 from "./data/right6"
console.log(right1, right2, right3)
import request from "../../api/request"
export default {
  data() {
    const self = this
    return {
      config:{
        headerHeight: 75,
        // header: ['列1', '列2', '列3'],
        data: [
          ['行1列1', '行1列2', '行1列3'],
          ['行2列1', '行2列2', '行2列3'],
          ['行3列1', '行3列2', '行3列3'],
          ['行4列1', '行4列2', '行4列3'],
          ['行5列1', '行5列2', '行5列3'],
          ['行6列1', '行6列2', '行6列3'],
          ['行7列1', '行7列2', '行7列3'],
          ['行8列1', '行8列2', '行8列3'],
          ['行9列1', '行9列2', '行9列3'],
          ['行10列1', '行10列2', '行10列3']
        ]
      },
      myChart: '',
      myChart2: '',
      myChart3: '',
      myChart4: '',
      myChart5: '',
      myChart6: '',
      timer: null,
      swiperOptions: {
        // loop: true,
        autoplay: true,
        delay: 6000,
        disableOnInteraction: false,
        // slidesPerView: 4, //显示个数
        // direction: "vertical",
        pagination: {
          el: ".swiper-pagination",
        },
        on: {
          slideChangeTransitionStart(){
            // console.log(swiper, index)
            console.log(this.activeIndex)
            self.activeIndex = this.activeIndex
          }
        }
      },
      activeIndex: 0
    }
  },
  mounted() {
    this.myChart = this.$echarts.init(this.$refs.rightHeadContent)
    this.myChart2 = this.$echarts.init(this.$refs.rightHeadContent2)
    this.myChart3 = this.$echarts.init(this.$refs.rightHeadContent3)
    this.myChart4 = this.$echarts.init(this.$refs.rightHeadContent4)
    this.myChart5 = this.$echarts.init(this.$refs.rightHeadContent5)
    this.myChart6 = this.$echarts.init(this.$refs.rightHeadContent6)
    if(this.timer){
      clearInterval(this.timer)
    }
    this.getData()
    this.timer = setInterval(() => {
      this.getData()
    }, 10000)
    // this.drawLine1(right1)
    // this.drawLine2(right2)
    // this.drawLine3()
    // this.drawLine4()
  },
  methods: {
    getData() {
      // 党员变化趋势接口
      request({
        url: '/api/v1/statusList.json'
      }).then(res => {
        console.log(res)
        const obj = {}
        res.data.map(item => {
          if(!obj[item.year]){
            obj[item.year] = [item]
          }else {
            obj[item.year].push(item)
          }
        })
        // const legend = ['正式党员', '新党员', '退休党员']
        let arr1 = []
        let arr2 = []
        let arr3 = []
        const xData = Object.keys(obj)
        xData.map((item, index) => {
          arr1[index] = obj[item].find(itm => itm.statustext == '正式党员') ? obj[item].find(itm => itm.statustext == '正式党员').total : 0
          arr2[index] = obj[item].find(itm => itm.statustext == '新党员') ? obj[item].find(itm => itm.statustext == '新党员').total : 0
          arr3[index] = obj[item].find(itm => itm.statustext == '退休党员') ? obj[item].find(itm => itm.statustext == '退休党员').total : 0
        })
        console.log(obj, 'obj')
        console.log(arr1, 'arr1')
        console.log(arr2, 'arr2')
        console.log(arr3, 'arr3')
        console.log(xData, 'xData')
        right1.xAxis[0].data = xData
        right1.series[0].data = arr1
        right1.series[1].data = arr2
        right1.series[2].data = arr3
        this.drawLine1(right1)
      })
      // 党组织发展趋势
      request({
        // url: '/api/v1/orgByCounty.json'
        url: '/api/v1/orgByCounty.json'
      }).then(res => {
        console.log(res)
        const xData = res.data.map(item => item.countytext)
        const yData = res.data.map(item => item.total)
        right2.xAxis[0].data = xData
        right2.series[0].data = yData
        this.drawLine2(right2)
      })
      // 党员结构分析--年龄
      request({
        url: '/api/v1/ageTotal.json',
        body: {
          type: 'age'
        }
      }).then(res => {
        console.log(res)
        const data = res.data.map(item => {
          return {
            name: item.desc,
            value: item.total
          }
        })
        const newData = right3(data)
        this.drawLine3(newData)
      })
      // 党员结构分析--性别
      request({
        url: '/api/v1/ageTotal.json',
        body: {
          type: 'sex'
        }
      }).then(res => {
        console.log(res)
        const data = res.data.map(item => {
          return {
            name: item.desc,
            value: item.total
          }
        })
        const newData = right4(data)
        this.drawLine4(newData)
      })
      // 党员结构分析--学历
      request({
        url: '/api/v1/ageTotal.json',
        body: {
          type: 'education'
        }
      }).then(res => {
        console.log(res)
        const max = Math.max(...res.data.map(item => item.total))
        const data = res.data.map(item => {
          return {
            name: item.desc,
            value: item.total,
            max: max * 1.5
          }
        })
        const newData = right5(data)
        this.drawLine5(newData)
      })
      // 党员结构分析--民族
      request({
        url: '/api/v1/ageTotal.json',
        body: {
          type: 'nation'
        }
      }).then(res => {
        console.log(res)
        // let right2 = right2
        // const data = res.data.map(item => {
        //   return {
        //     name: item.desc,
        //     value: item.total
        //   }
        // })
        // const newData = right6(data)
        // this.drawLine6(newData)
        const xData = res.data.map(item => item.desc)
        const yData = res.data.map(item => item.total)
        right6.xAxis[0].data = xData
        right6.series[0].data = yData
        this.drawLine6(right6)
      })
    },
    drawLine1(right1) {
      // 基于准备好的dom，初始化echarts实例
      // let myChart = this.$echarts.init(this.$refs.rightHeadContent);
      // 绘制图表
      this.myChart.setOption(right1);
    },
    drawLine2(right2) {
      // 基于准备好的dom，初始化echarts实例
      // let myChart = this.$echarts.init(this.$refs.rightHeadContent2);
      // 绘制图表
      this.myChart2.setOption(right2);
    },
    drawLine3(right3) {
      // 基于准备好的dom，初始化echarts实例
      // let myChart = this.$echarts.init(this.$refs.rightHeadContent3);
      // 绘制图表
      this.myChart3.setOption(right3);
    },
    drawLine4(right3) {
      // 基于准备好的dom，初始化echarts实例
      // let myChart = this.$echarts.init(this.$refs.rightHeadContent3);
      // 绘制图表
      this.myChart4.setOption(right3);
    },
    drawLine5(right3) {
      // 基于准备好的dom，初始化echarts实例
      // let myChart = this.$echarts.init(this.$refs.rightHeadContent3);
      // 绘制图表
      this.myChart5.setOption(right3);
    },
    drawLine6(right3) {
      // 基于准备好的dom，初始化echarts实例
      // let myChart = this.$echarts.init(this.$refs.rightHeadContent3);
      // 绘制图表
      this.myChart6.setOption(right3);
    },
    // drawLine4() {
    //   // 基于准备好的dom，初始化echarts实例
    //   let myChart = this.$echarts.init(this.$refs.leftItem4);
    //   // 绘制图表
    //   myChart.setOption(left1);
    // },
  }
}
</script>

<style scoped>
.right_head{
  width: 1977px;
  height: 1059px;
  background: url("../../assets/img/right/1/bg.png") no-repeat left center;
  background-size: cover;
  position: absolute;
  z-index: 1;
  top: 92px;
  right: 25px;
}
.right_head_con{
  width: 1768px;
  height: 773px;
  position: absolute;
  top: 163px;
  right: 75px;
  z-index: 9;
}
.right_head_top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 23px 44px 27px 40px;
  font-size: 36px;
  font-weight: 300;
  color: #FFF;
}
.right_bottom_01{
  width: 1018px;
  height: 1095px;
  background: url("../../assets/img/right/2/bg.png") no-repeat left top;
  background-size: cover;
  position: absolute;
  z-index: 1;
  bottom: 17px;
  right: 934px;
}
.right_bottom_02{
  width: 1038px;
  height: 1099px;
  background: url("../../assets/img/right/3/bg.png") no-repeat left top;
  background-size: cover;
  position: absolute;
  z-index: 1;
  bottom: 0px;
  right: 7px;
}
.right_bottom_content{
  width: 833px;
  height: 927px;
  position: absolute;
  top: 83px;
  left: 91px;
  z-index: 9;
}
.right_bottom_02_content{
  top: 70px;
  left: 112px;
}
.right_head_content{
  height: 673px;
  padding: 0 50px;
}
.left_item2_head{
  height: 100px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-bottom: 40px;
}
.left_item2_head li{
  list-style: none;
  font-size: 30px;
  font-weight: 300;
  position: relative;
  height: 100px;
  line-height: 100px;
}
.left_item2_head li.active::after{
  content: " ";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%);
  width: 50px;
  height: 5px;
  background-color: rgb(128,230,255);
}
</style>
